<template>
  <div>
    <div class=" ">
      <a-button @click="startPrint" ><template #icon><PrinterOutlined /></template>打印</a-button>
    </div>
    <div ref="print">
      <div style="text-align: center">
        <h2>
          {{ flowData.flowTitle }}
          <small v-if="flowData.stepName">({{ flowData.stepName }})</small>
        </h2>
      </div>
      <!-- 生成自定义表单 -->
      <a-card size="small" :bordered="false">
        <generate-form
          v-if="isshow"
          insite="true"
          @on-change="handleDataChange"
          :data="widgetForm"
          :flowData="flowData"
          ref="generateForm"
        ></generate-form>
      </a-card>
    </div>
    <!-- 自定义表单预览结束 -->
  </div>
</template>

<script>
  import GenerateForm from '@/mycomponents/customerForm/GenerateForm'
 import { PrinterOutlined} from '@ant-design/icons-vue'
  export default {
    name: 'FmMakingForm',
    components: {
      GenerateForm,
      PrinterOutlined
    },

    data() {
      return {
        widgetForm: {
          list: [],
          config: {
            labelWidth: 20,
            labelPosition: 'right',
            size: 0,
            offset: 0,
            tableName: '',
            note: '',
          },
        },
        flowData: {},
        stepId: '',
        isshow: false,
        tableshow: false,
      }
    },

    props: {
      data: {
        type: Object,
        default: Object,
      },
    },
    created() {
      this.load()
    },

    methods: {
      load() {
        var that = this

        // console.log(' res.content', res.content)
        this.data.fieldState.forEach((element) => {
          element.state = 1
        })
        var content = JSON.parse(this.data.formJSON)
        that.widgetForm = content
        that.stepId = this.data.stepId
        that.flowData = this.data
        that.isshow = true
        that.flowData.fieldState.forEach((element) => {
          element.state = 1
        })
      },

      handleDataChange(field, value, data) {
        console.log(field, value, data)
      },
      // 打印
      startPrint() {
        this.$print(this.$refs.print) // 使用
      },
    },
  }
</script>

<style></style>
